<template name="swiperlist">
	
	<view class="swiperlist-content">
			<mescroll ref="mescrollRef" @init="mescrollInit" height="100%" :down="downOption" @down="downCallback" :up="upOption"
			 @up="upCallback">
		<!-- 图文 -->
		<block v-if="show==0">
			<view class="swiper-box-style">
				<view class="swiper-box-item" v-for="(item,index) in getGoodsskuList" :key="index" @click="toDetail(item)">
					<view class="item-icon" v-if="tw==0" >
						<image :src="item.sku_image" mode=""></image>
					</view>
				
					<view class="item-icon" v-if="tw==1">
						<image :src="item.image" mode=""></image>
					</view>
					
					<view class="item-title" v-if="tw==0">{{item.sku_name}}</view>
					<view class="item-title" v-if="tw==1">{{item.title}}</view>
					
					<view class="item-user" v-if="tw==1">
						<view class="user-Info">
							<view class="user-icon">
								<image :src="item.headimg" mode=""></image>
							</view>
							<view class="user-name">{{item.nickname}}</view>
						</view>
						<view class="user-hot">
							<view class="hot-Icon">
								<image src="https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/home/pinglun.png" mode=""></image>
							</view>
							<view class="hot-num">{{item.love_num}}</view>
						</view>
					</view>

					<view class="item-user" v-if="tw==0" @click="toDetail(item)">
						<view class="user-Info">
							<view class="user-name-Two">￥{{item.price}}</view>
						</view>
						<view class="user-hot">
							<view class="hot-num-Two">购买</view>
						</view>
					</view>

				</view>
			</view>
		</block>
		<!-- 视频 -->
		<block v-if="show==1">
			<view class="swiper-box-style">
				<view class="swiper-box-item" v-for="(item,index) in getGoodsskuList" :key="index" @click="toLive(item)">
					<view class="player-icon">
						<image src="https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/home/play_img.png" mode=""></image>
					</view>
					<view class="item-icon">
						<image :src="item.image" mode=""></image>
					</view>
					<view class="item-title">{{item.title}}</view>
					<view class="item-user">
						<view class="user-Info">
							<view class="user-icon">
								<image src="https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/home/user.png" mode=""></image>
							</view>
							<view class="user-name">{{item.nickname}}</view>
						</view>
						<view class="user-hot">
							<view class="hot-Icon">
								<image src="https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/home/pinglun.png" mode=""></image>
							</view>
							<view class="hot-num">{{item.love_num}}</view>
						</view>
					</view>
				</view>
				<view style="height: 100rpx;"></view>
			</view>
		</block>
	</mescroll>
	</view>
</template>
<script>
	import MescrollMixin from '@/components/mescroll/mescroll-mixins.js';
	import MescrollMoreItemMixin from '@/components/mescroll/mixins/mescroll-more-item.js';
	export default {
		name: "swiperlist",
		mixins: [MescrollMixin, MescrollMoreItemMixin],
		data() {
			return {
				mescroll: null,
				downOption: {
					auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption: {
					auto: true, // 不自动加载
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						icon: 'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/home/empty.png',
						tip: '~ 空空如也 ~' // 提示
					}
				},
				getGoodsskuList:[],
				getMemberWorksList:[]
			};
		},
		//属性
		props: {
			show: {
				// 返回事件判断显示
				type: Number,
				default: 0
			},
			tw:{
				// 返回事件判断显示
				type: Number,
				default: 0
			},
			site_id:{
				type: String,
				default: ''
			},
			req:{
				type: Number,
				default: 0
			},
			tabIndex:{
				type: Number,
				default: 0
			}
		},
		created() {

		},
		onLoad(){
			
		},
		onShow(){
		},
		mounted() {

		},
		methods: {
			// 初始化
			mescrollInit(e) {
				this.mescroll = e;
			},
			/*下拉刷新的回调 */
			downCallback(e) {
				// console.log("this.req",this.req)
				// console.log("tabIndex",this.tabIndex)
				if (!this.$util.isLoginCall()) return false;
				setTimeout(()=>{
					if(this.req==0){
						this.getGoodssku(1,4,this.site_id)
					}else if(this.req==1){
						this.getMemberWorks(1,4,'graphic',uni.getStorageSync('produceMember_id'))
					}else if(this.req==2){
						this.getMemberWorks(1,4,'video',uni.getStorageSync('produceMember_id'))
					}else if(this.req==3){
						this.getMemberWorks(1,4,'live',uni.getStorageSync('produceMember_id'))
					}
				},300)
			},
			/*上拉加载的回调 */
			upCallback(page) {
				// console.log('logpage', page);
				// console.log("tabIndex",this.tabIndex)
				if (!this.$util.isLoginCall()) return false;
				setTimeout(()=>{
					if(this.req==0){
						this.getGoodssku(page.num,4,this.site_id)
					}else if(this.req==1){
						this.getMemberWorks(page.num,4,'graphic',uni.getStorageSync('produceMember_id'))
					}else if(this.req==2){
						this.getMemberWorks(page.num,4,'video',uni.getStorageSync('produceMember_id'))
					}else if(this.req==3){
						this.getMemberWorks(page.num,4,'live',uni.getStorageSync('produceMember_id'))
					}
				},300)
			},
			getGoodssku(page,page_size,site_id){
				this.$request.getGoodssku({
					page:page,
					page_size:page_size,
					site_id:site_id,
				}).then(res=>{
					console.log("getGoodssku",res)
					this.mescroll.endSuccess(res.data.list.length);
					if (res.data.list.length > 0) {
						if (page == 1) {
							this.getGoodsskuList = res.data.list
							this.page = 1
						} else {
							this.getGoodsskuList = this.getGoodsskuList.concat(res.data.list)
							this.page = page
						}
					}
				})
			},
			getMemberWorks(page,page_size,graphic,member_id){
				this.$request.getMemberWorks({
					page:page,
					page_size:page_size,
					type:graphic,
					member_id:member_id
				}).then(res=>{
					console.log("getMemberWorks",res)
					this.mescroll.endSuccess(res.data.list.length);
					if (res.data.list.length > 0) {
						if (page == 1) {
							this.getGoodsskuList = res.data.list
							this.page = 1
						} else {
							this.getGoodsskuList = this.getGoodsskuList.concat(res.data.list)
							this.page = page
						}
					}
				})
			},
			toDetail(item){
				// console.log(item)
				if(this.tw == 0){
					// this.$Router.push({
					// 	path:"/shopPages/goods/detail",
					// 	query:{
					// 		sku_id:item.sku_id
					// 	}
					// })
					this.$util.redirectTo('/livePages/details/details',{sku_id:item.sku_id})
				}else{
					// this.$Router.push({
					// 	path:"/publicPages/details/details",
					// 	query:{
					// 		content_id:item.id
					// 	}
					// })
					this.$util.redirectTo('/livePages/details/details',{content_id:item.id})
				}
			},
			toLive(item){
				this.$util.redirectTo('/livePages/video/video',{video_id:item.id})
			}
		}
	}
</script>
<style lang="scss" scoped>
	image {
		width: 100%;
		height: 100%;
	}

	.swiperlist-content {
		width: 100%;

		.swiper-box-style {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			flex-wrap: wrap;
		}

		.swiper-box-item {
			width: 340rpx;
			height: auto;
			background: #FFFFFF;
			border-radius: 12rpx;
			padding-bottom: 20rpx;
			margin-left: 22rpx;
			margin-bottom: 22rpx;
			position: relative;

			.player-icon {
				position: absolute;
				top: 20rpx;
				right: 20rpx;
				width: 18px;
				height: 18px;
				z-index: 9999;
			}

			.item-icon {
				width: 340rpx;
				height: 340rpx;
				border-radius: 12rpx 12rpx 0rpx 0rpx;
			}

			.item-icon image {
				border-radius: 12rpx 12rpx 0rpx 0rpx;
			}

			.item-title {
				width: 317rpx;
				margin: 0 auto;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				line-clamp: 2;
				-webkit-box-orient: vertical;
				padding-top: 20rpx;
			}

			.item-user {
				width: 317rpx;
				margin: 0 auto;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 20rpx;

				.user-Info {
					display: flex;
					align-items: center;

					.user-icon {
						width: 48rpx;
						height: 48rpx;
						border-radius: 50%;
					}

					.user-icon image {
						border-radius: 50%;
					}

					.user-name {
						margin-left: 10rpx;
						max-width: 120rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}

				.user-hot {
					display: flex;
					align-items: center;

					.hot-Icon {
						width: 10px;
						height: 13px;
						margin-right: 5px;
					}

					.hot-num {
						max-width: 80rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						font-size: 20rpx;
					}
				}

			}
		}
	}
	.user-name-Two{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FF364E;
	}
	.hot-num-Two {
		width: 72rpx;
		height: 38rpx;
		background: linear-gradient(90deg, #FF6744, #FD3B5C);
		border-radius: 19rpx;
		text-align: center;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 38rpx;
	}
</style>
